<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="./bootstrap/bootstrap-icons.css" />
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/student.css" />
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- add Modal -->
        <div class="modal" id="modal" v-show="isShow">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">添加学员</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" @click="onquxiao"></button>
                    </div>
                    <div class="modal-body">
                        <form id="form" class="g-3 row" autocomplete="off" novalidate>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="input-group-label">姓名：</label>
                                    <input v-model="username" type="text" name="name" value="" class="form-control" placeholder="请输入姓名" />
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="input-group-label">性别：</label>
                                    <div class="input">
                                        <div class="form-check d-inline-block">
                                            <input v-model="sex" value="0" checked id="cb01" class="form-check-input" type="radio"
                                                name="gender" />
                                            <label for="cb01" class="form-check-label">男</label>
                                        </div>
                                        <div class="form-check d-inline-block">
                                            <input v-model="sex" value="1" id="cb02" class="form-check-input" type="radio"
                                                name="gender" />
                                            <label for="cb02" class="form-check-label">女</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="input-group-label">年龄：</label>
                                    <input v-model="age" type="text" name="age" class="form-control" placeholder="请输入年龄" />
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="input-group-label">组号：</label>
                                    <input v-model="group" type="text" name="group" value="" class="form-control"
                                        placeholder="请输入1-8组号" />
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="input-group-label">期望薪资：</label>
                                    <input v-model="hope_slary" type="text" name="hope_salary" value="" class="form-control"
                                        placeholder="请输入期望薪资" />
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="input-group-label">就业薪资：</label>
                                    <input v-model="slary" type="text" name="salary" value="" class="form-control"
                                        placeholder="请输入就业薪资" />
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label class="input-group-label">籍贯：</label>
                                    <div class="input pl-0">
                                        <select class="form-select custom-select" name="province" @change="changes">
                                            <option v-for="(item, index) in sheng" :value="" >--{{sheng[index]}}--</option>
                                        </select>
                                        <select class="form-select custom-select" name="city">
                                            <option v-for="(item, index) in shi" :value="">--{{shi[index]}}--</option>
                                        </select>
                                        <select class="form-select custom-select" name="area">
                                            <option v-for="(item, index) in qu"  :value="">--{{qu[index]}}--</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" @click="onquxiao">取消</button>
                        <button type="button" class="btn btn-blue" id="submit" @click="onqueren">确认</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="./bootstrap/bootstrap.min.js"></script>
    <script>
        new bootstrap.Modal('#modal').show()
        const app = new Vue({
            el: '#app',
            data: {
                value:'',
                isShow:true,
                username:'',
                age:'',
                sex: 0, // 0表示男
                group:'',
                slary:'',
                hope_slary:'',
                sheng:['四川省','广东省','河南省'],
                shi:['成都','汕头','新乡'],
                qu:['金牛区','珠海区','新乡镇']

            },
            methods: {
                onqueren(){
                    if(this.username ===''||this.age===""||this.group||this.slary===''||hope_slary==='') return alert ('请输入信息')
                    this.isShow = false
                },
                onquxiao(){
                    this.isShow = false

                },
                changes(){

                }

            },
        })
    </script>
</body>

</html>